<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<xn:title text="校内对话框演示" />

<script>
<!--

function confirm_callback(confirm) {
  var confirm_display = document.getElementById('confirm_display');
  if (confirm) {
    confirm_display.setTextValue('你选择了确定');
  }
  else {
    confirm_display.setTextValue('你选择了取消');
  }
}

//-->
</script>


<br>
<br>
<h2>
<span id="title">XNJS对话框演示</span>
</h2>
API文档见<a href="http://dev.xiaonei.com/wiki/Dialog">XNJS Dialog</a>

<hr>
<br>
<h4>
第一类对话框：ALERT对话框
</h4>
<p>
此类对话框用于提示用户某一事件的发生，只有一个按钮，是window.alert()的友好表现形式。
</p>
<br>
<br>
<br>

<a href="#" onclick="new Dialog(Dialog.DIALOG_ALERT, '欢迎使用功能强大的校内对话框！', 'ALERT对话框'); return false;">弹出ALERT对话框</a>
<br>
<br>
<a href="#" onclick="new Dialog(Dialog.DIALOG_ALERT, {message: '使用了对象传参方式，这种方式更灵活哦！3秒后会自动关闭。。。', button: '按钮文字也可以改哦', autoHide: 3}); return false;">弹出ALERT对话框，用对象传递参数</a>
<br>
<br>
<a href="#" onclick="new Dialog(Dialog.DIALOG_ALERT, {message: '出错啦！', title: 'error风格的ALERT', type: 'error'}); return false;">弹出ALERT对话框，error风格</a>

<hr>
<br>
<h4>
第二类对话框：CONFIRM对话框
</h4>
<p>
此类对话框用于让用户选择接受或拒绝某个事件，有两个选择按钮，是window.confirm()的友好表现形式。
</p>
<br>
<br>
<br>

<a href="#" onclick="new Dialog('同学，选确定还是取消？', 'CONFIRM对话框', confirm_callback); return false;">弹出CONFIRM对话框</a>&nbsp;&nbsp;&nbsp;<span id="confirm_display"></span>
<br>
<br>

<script>
<!--
var params_confirm_dialog = {
  title: 'CONFIRM对话框',
  message: '你爱吃苹果还是香蕉？',
  yes: '苹果',
  no: '香蕉',
  callBack: function(choice1) {
	  var two_choice_display = document.getElementById('two_choice_display');
	  if (choice1) {
	    two_choice_display.setTextValue('你爱吃苹果');
	  }
	  else {
	    two_choice_display.setTextValue('你爱吃香蕉');
	  }
  }
};
//-->
</script>
<a href="#" onclick="new Dialog(Dialog.DIALOG_CONFIRM, params_confirm_dialog); return false;">弹出CONFIRM对话框，用对象传递参数</a>&nbsp;&nbsp;&nbsp;<span id="two_choice_display"></span>


<hr>
<br>
<h4>
第三类对话框：CONFIRM对话框
</h4>
<p>
开发者可以自由定制的对话框。凡是前两种对话框都不能满足的需求，都可以通过定制这种对话框来实现期望的效果。
</p>
<br>
<br>
<br>

<xn:js-string var="select_color_jstring"> 
  <b>你喜欢哪种颜色？</b><br />
  <select id="select_color">
    <option value="transparent">没什么喜欢的</option>
    <option value="blue">蓝色</option>
    <option value="red">红色</option>
    <option value="yellow">黄色</option>
  </select>
</xn:js-string>

<script>
<!--
function panel_dialog_select_color() {
	var color_dialog;
	function select_color_callback() {
	  var color = document.getElementById('select_color').getValue();
	  document.getElementById('link_select_color').setStyle({background: color});
	  color_dialog.hide();
	}
	
	//把panel dialog的handle存成函数的一个property
	if (!panel_dialog_select_color.color_dialog) {
	 color_dialog = panel_dialog_select_color.color_dialog =
	     new Dialog(Dialog.DIALOG_PANEL, {
	     body: select_color_jstring,
	     header: 'PANEL对话框： 选择你喜欢的颜色'
	   }
	 );
	
	 var button1 = new Button('确定', select_color_callback);
	 color_dialog.addFooter(button1);
	}
	else {
		color_dialog = panel_dialog_select_color.color_dialog;
	}
    
    color_dialog.show();
}

function panel_dialog_demo() {
  var panel_dialog;

  //把panel dialog的handle存成函数的一个property
  if (!panel_dialog_demo.panel_dialog) {
    var params = {
      header: 'PANEL对话框功能大杂烩',
      body: '请点击各个按钮完成相应功能。这个对话框还顺便演示了Button的功能'
    };
    panel_dialog = panel_dialog_demo.panel_dialog = 
      new Dialog(Dialog.DIALOG_PANEL, params);
  
    var hide_button = new Button('隐藏对话框', hide_button_callback);
    panel_dialog.addFooter(hide_button); //将按钮添加到对话框

    var hideshow_button = new Button('彻底销毁对话框', destroy_button_callback);
    panel_dialog.addFooter(hideshow_button);
  
    var doc_button = new  Button('去看看Button的文档', doc_button_callback);
    panel_dialog.addFooter(doc_button);

    var moveleft_button = new Button('移动到最左边', function(){panel_dialog.setX(1);});
    panel_dialog.addFooter(moveleft_button);
  
    var move2elem_right_button = new Button('移动到标题右侧', move2elem_right_button_callback);
    panel_dialog.addFooter(move2elem_right_button);

    var move2elem_below_button = new Button('移动到标题下侧', move2elem_below_button_callback);
    panel_dialog.addFooter(move2elem_below_button);

    var move2elem_left_button = new Button('移动到标题左侧', move2elem_left_button_callback);
    panel_dialog.addFooter(move2elem_left_button);

    var move2elem_top_button = new Button('移动到标题上侧', move2elem_top_button_callback);
    panel_dialog.addFooter(move2elem_top_button);

    var diable_button = new Button({text: 'Disable我自己', onclick: function(){diable_button.disable();}});
    panel_dialog.addFooter(diable_button);

    var enable_button = new Button({text: 'Enable前一个按钮', onclick: function(){diable_button.enable();}});
    panel_dialog.addFooter(enable_button);
  }
  else {
    panel_dialog = panel_dialog_demo.panel_dialog;
  }

  panel_dialog.show();

  //下面定义各个button的callback函数
  function hide_button_callback(){
    panel_dialog.hide();
  }

  function destroy_button_callback(){
    panel_dialog_demo.panel_dialog = undefined;
    panel_dialog.destroy();
  }

  function doc_button_callback(){
    document.setLocation('http://dev.xiaonei.com/wiki/Button');
  }

  function move2elem_right_button_callback() {
    panel_dialog.setAlignType('2-1');
    panel_dialog.moveTo(document.getElementById('title'));
  }

  function move2elem_below_button_callback() {
    panel_dialog.setAlignType('4-1');
    panel_dialog.moveTo(document.getElementById('title'));
  }

  function move2elem_left_button_callback() {
    panel_dialog.setAlignType('1-2');
    panel_dialog.moveTo(document.getElementById('title'));
  }

  function move2elem_top_button_callback() {
    panel_dialog.setAlignType('1-4');
    panel_dialog.moveTo(document.getElementById('title'));
  }
}
//-->
</script>
<a id="link_select_color" href="#" onclick="panel_dialog_select_color(); return false;">弹出PANEL对话框，选择你喜欢的颜色</a>
<br>
<br>
<a href="#" onclick="panel_dialog_demo(); return false;">弹出PANEL对话框，各种功能大杂烩</a>
